<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>博客评论</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/css/user.css" media="all" />
    <link rel="stylesheet" href="/css/search.css" media="all" />
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1041315_0zq2yro0cfn.css">
</head>
<body class="childrenBody">
<fieldset class="layui-elem-field">
    <legend>查询</legend>
    <div class="layui-field-box">
    <div class="layui-form  toolbar" >
        状态：
        <select id="is_status" name="s_type">
            <option value="">全部</option>
            <option value="1">评论</option>
            <option value="2">留言</option>
        </select>
        <div class="layui-input-inline">
            <a class="layui-btn" lay-submit="" lay-filter="searchForm"><i class="iconfont icon-sousuo2"></i>查询</a>
        </div>
        <div class="layui-inline" >
            <button type="reset" id="resetTable" class="layui-btn layui-btn-primary"><i class="iconfont icon-zhongzhi"></i>重置</button>
        </div>
        <div class="layui-inline">
            <a class="layui-btn layui-btn-danger" data-type="deleteSome"><i class="iconfont icon-shanchu"></i>批量删除</a>
        </div>
    </div>
    </div>
</fieldset>
<div class="layui-form users_list">
    <table class="layui-table" id="test" lay-filter="demo"></table>
    <!-- 状态列 -->
    <script type="text/html" id="is_top">
        <input type="checkbox" lay-filter="is_top" value="{{d.id}}" lay-skin="switch" lay-text="是|否"
               {{d.isTop==1?'checked':''}}/>
    </script>
    <!-- 状态列 -->
    <script type="text/html" id="is_recommend">
        <input type="checkbox" lay-filter="is_recommend" value="{{d.id}}" lay-skin="switch" lay-text="推荐|普通"
               {{d.isRecommend==1?'checked':''}}/>
    </script>

    <script type="text/html" id="barDemo">
<!--        <a class="layui-btn layui-btn-xs" lay-event="edit" ><i class="iconfont icon-xiugai"></i>编辑</a>-->
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="iconfont icon-shanchu"></i>删除</a>
    </script>
    <script type="text/html" id="status">
        {{#  if(d.type =='1'){ }}
        <span style="color: #F581B1;">评论</span>
        {{#  } else { }}
        留言
        {{#  } }}
    </script>
</div>
<div id="page" style="text-align: center;"></div>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/js/tools.js?t=1"></script>
<script   type="text/javascript"  th:inline="none">
    var $,common;
    layui.config({
        base: '/js/common/' //假设这是你存放拓展模块的根目录
    }).use(['layer','form','table','laypage','common'], function() {
        var layer = layui.layer,
                $ = layui.jquery,
                form = layui.form,
                laypage=layui.laypage,
            common=layui.common,
               table = layui.table;
            //表格变量

            table.render({
                elem: '#test',
                even: true,
                url: 'findList',
                method: 'post',
                id:'testReload',
                // page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                //     layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], //自定义分页布局
                //     //,curr: 5 //设定初始在第 5 页
                //     groups: 2, //只显示 1 个连续页码
                //     first: "首页", //显示首页
                //     last: "尾页", //显示尾页
                //     limits:[3,10, 20, 30]
                // },
                page: false,
                loading: true,
                width: $(parent.window).width() - 223,
                cols: [[
                    {type: 'checkbox'},
                    {field: 'id', title: 'ID', width: '4%'},
                    {field: 'parentId', title: '父Id',width:'4%'},
                    {field: 'content', title: '内容',width:'30%'},
                    {field: 'type', title: '类型',width:'5%',templet:'#status'},
                    {
                        field: 'createTime',
                        title: '创建时间',
                        width: '10%',
                        templet: '<div>{{ layui.laytpl.toDateString(d.createTime) }}</div>',
                        unresize: true
                    }, //单元格内容水平居中
                    {title: '操作', fixed: 'right',  align: 'center', toolbar: '#barDemo'}
                ]],
                done: function(res, curr, count){
            //pages=res.page;
            counts=res.count;
            //完整功能
            laypage.render({
                elem: 'page'
                ,count: counts,
                first: '首页',
                last: '尾页'
                ,layout: ['count', 'prev', 'page', 'next',  'refresh', 'skip']
                ,theme: '#00A0E9'
                ,curr: curr
                ,skip: true
                ,jump: function(obj,first){
                    curr = obj.curr;

                    if(!first){
                        getData(obj.curr,obj.limit)
                    }
                }
            });

        }

    });

        function getData(page,limit){
            $.ajax({
                type: 'post',
                url: 'findList?page='+page+"&limit="+limit,
                async: false,
                success: function (data) {
                    $(".layui-laypage-btn").click();
                    table.reload('testReload',{
                        data : data,
                        page:{
                            curr:page
                        }
                    });

                }
            });
        }
        //重置
        $('#resetTable').on('click', function(){
            $('#title').val("");
            $('#is_status').val("");
            $('#isTop').val("");
            $('#isRecommend').val("");
            table.reload('testReload',
            {where:data.field}
        );
            form.render('select')
        });
        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'edit'){
                var url = "editUI?id="+data.id;
                common.cmsLayOpen('修改文章', url, '90%', '90%');
            }
            if(obj.event === "del"){
                layer.confirm("你确定要删除该篇文章吗么？",{btn:['是的,我确定','我再想想']},
                    function(){
                        $.post("delete",{"id":data.id},function (res){
                            if(res.success){
                                layer.msg("删除成功",{time: 1000},function(){
                                    table.reload('testReload');
                                });
                            }else{
                                layer.msg(res.message);
                            }

                        });
                    }
                )
            }
        });
        var active={
            //批量删除
            deleteSome : function(){
                var checkStatus = table.checkStatus('testReload'),
                        data = checkStatus.data;
                if(data.length > 0){
                    console.log(JSON.stringify(data));
                    layer.confirm("你确定要删除么？",{btn:['是的,我确定','我再想想']},
                            function(){
                                var deleteindex = layer.msg('删除中，请稍候',{icon: 16,time:false,shade:0.8});
                                $.ajax({
                                    type:"POST",
                                    url:"batchDelete",
                                    dataType:"json",
                                    contentType:"application/json",
                                    data:JSON.stringify(data),
                                    success:function(res){
                                        layer.close(deleteindex);
                                        if(res.success){
                                            layer.msg("删除成功",{time: 1000},function(){
                                                table.reload('testReload');
                                            });
                                        }else{
                                            layer.msg(res.message);
                                        }
                                    }
                                });
                            }
                    )
                }else{
                    layer.msg("请选择需要删除的角色",{time:1000});
                }
            }
        };

        $('.layui-inline .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //搜索
        form.on("submit(searchForm)",function(data){
            table.reload('testReload', {where:data.field});
        });

    });
</script>
</body>
</html>